<style media="screen">
	#contract-update .contract-tab button {
		height: 56px;
		line-height: 56px;
		padding: 0 15px;
		border: 0;
		background: 0 0;
		border-radius: 0;
	}

	#contract-update .contract-tab button.active {
		color: #5e67a5;
		border-bottom: 3px solid #5e67a5;
	}

	.color-delete {
		color: #ea723d;
		text-decoration: line-through;
	}

	.table-gray-title {
		line-height: 30px;
		padding: 0 15px;
		background: rgba(240, 240, 240, 1);
		border-radius: 2px;
		display: inline-block;
		margin-left: 12px;
		margin-top: 10px;
	}

	.contract-detail-container .table .content-item>div {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.contract-detail-container .table .content-item div {
		height: auto;
	}

	.contract-detail-container h3 {
		width: auto !important;
	}
	.loadprogress {
        position: fixed;
        z-index: 999999;
        left: 0;
        bottom: 0;
        height: 20px;
        width: 500px;
        font-size: 12px;
        text-indent: 3px;
        line-height: 20px;
    }

    .flexbox {
        display: flex;
        justify-content: space-between;
    }

    .fileName {
        margin: 0 10px;
    }

    .fileList {
        display: flex;
        flex-wrap: wrap;
    }

    .tb-content-plus li {
        min-height: 40px;
        display: flex;
        padding: 10px;
    }

    .rentClass {
        flex-direction: column;
        align-items: flex-start;
    }

    .rentClass>div {
        display: flex;
        flex-direction: column;
    }

    .rentClass>div div {
        margin-bottom: 10px;
        font-weight: 600;
        font-size: 14px;
    }

    .rentClass>div span {
        margin-bottom: 10px;
    }

    .invalidCalss {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: red;
    }

    .table-gray-title {
        line-height: 30px;
        padding: 0 15px;
        background: rgba(240, 240, 240, 1);
        border-radius: 2px;
        display: inline-block;
        margin-bottom: 10px;
    }
    .textCss{
        display: inline-block;
        margin-bottom: 10px;
        color: #666;
        width: 100px;
        height: 35px;
        text-align: center;
        line-height: 30px;
        background: rgba(236, 129, 81, .3);
        padding: 4px 8px;
        border-radius: 2px;
    }
	.tableheader{
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #a5aab7;
	}
	.gradient-color{
  background: -webkit-gradient(linear,0 0,0 bottom,from(#fcfcfc),to(#ececec))
}
.tablebo{
	border: 1px solid #ccc;
	border-bottom: none	;
}
</style>

<section id="contract-update">
	<div class="pb-10">
		<page-tab :data="tabData" :selected-index="tabSelectedIndex" prefix="变更管理" @on-item-click="handleSelectedTab">
		</page-tab>
		<div class="js-failMemo" style="margin: 0;"
			v-if="data.alterInfoVO.failMemo && (data.alterInfoVO.status == 'FCP' || data.alterInfoVO.status == 'FBP')">
			{{data.alterInfoVO.failMemo}}</div>
		<div class="js-content-scrollno plr-24">
			<div class="contract-content">
				<!-- 合同详情 -->
				<section class="contract-detail-container mt-15 pt-10 relative" v-if="selectedTabItem == '合同信息'">

					<div class="absolute cursor" style="right: 0;top: 0px;color: rgba(86, 94, 153, 1);" @click="versionevent">
						<span class="icon-Gm-version"></span>
						<span>版本比对</span>
					</div>

					<!-- 基本信息 -->
					<div class="border-b pb-10">
						<!-- <h3 class="title">主要信息</h3> -->
						<div class="row">
							<div class="col-md-2 title">变更单号：</div>
							<div class="col-md-2 item htbh" style="width:200px;">{{data.alterInfoVO.alterNo | formatUndefined}}</div>
							<div class="col-md-2 title">关联单据：</div>
							<div class="col-md-3 item">
								<a :href="'#/contractNewDeatil?id='+contractId+'&ddtab=true'"
									target="_blank">{{ data.alterInfoVO.mCode | formatUndefined}}</a>
							</div>
							<div class="col-md-2 title">变更生效日：</div>
							<div class="col-md-2 item ellipsis-1">{{ data.alterInfoVO.effectiveDate | formatDate }}</div>
						</div>
						<div class="row">
							<div class="col-md-2 title">变更内容：</div>
							<div class="col-md-2 item zlqx" style="width:200px;">
								{{ data.alterInfoVO.alterType | formAlterType }}
							</div>
							<div class="col-md-2 title">创建信息：</div>
							<div class="col-md-3 item ellipsis-1"
								:title="hlDateUtil.formatUTCDate(data.alterInfoVO.createTime) + data.alterInfoVO.createUser | formatUndefined">
								{{data.alterInfoVO.createTime | formatDetailDate}} ({{data.alterInfoVO.createUser | formatUndefined}})
							</div>
							<div class="col-md-2 title">最后更新：</div>
							<div class="col-md-3 item ellipsis-1"
								:title="hlDateUtil.formatUTCDate(data.alterInfoVO.lastUpdateTime) + data.alterInfoVO.lastUpdateUser | formatUndefined">
								{{data.alterInfoVO.lastUpdateTime | formatDetailDate}}
								({{data.alterInfoVO.lastUpdateUser | formatUndefined}})</div>
						</div>
						<div class="row">
							<div class="col-md-2 title">变更状态：</div>
							<div class="col-md-9 color-orange item">{{ data.alterInfoVO.statusVal }}</div>
						</div>
						<div class="row" v-if="alertFile.length">
							<div class="col-md-2 title">补充协议：</div>
							<div class="col-md-9 item">
								<div v-for="item in alertFile"><a :href="item.url">{{item.name}}</a></div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-2 title">变更说明：</div>
							<div class="col-md-9 item zlqx">{{data.alterInfoVO.alertDescription | formatUndefined}}</div>
						</div>
					</div>
					<!-- 合同基本信息 -->
					<div class="border-b pb-10">
						<h3 class="title">合同基本信息</h3>
						<div class="row">
							<div class="col-md-2 title">合同编号：</div>
							<div class="col-md-2 item" style="width: 200px;">{{data.cCode | formatUndefined}}</div>

							<div class="col-md-2 title">合同名称：</div>
							<div class="col-md-3 item">{{data.name | formatUndefined}}</div>

							<div class="col-md-2 title">签订时间：</div>
							<div class="col-md-3 item">{{data.signTime | formatDate}}</div>
						</div>
						<div class="row">
							<div class="col-md-2 title">备注：</div>
							<div class="col-md-9 item">{{data.memo | formatUndefined}}</div>
						</div>
					</div>
					<!-- 乙方 -->
					<div class="hl-global-detail-box">
						<h3 class="title">乙方</h3>
						<div class="hl-row">
							<div class="hl-row-item" style="width: 100%;">
								<div class="title">客户名称：</div>
								<div class="item">{{data.zlfCompany}}</div>
							</div>
						</div>
						<div class="hl-row">
							<div class="hl-row-item">
								<div class="title">客户类型：</div>
								<div class="item">{{data.zlfType | formatZlfType}}</div>
							</div>
							<div class="hl-row-item">
								<div class="title">所属行业：</div>
								<div class="item">{{ityName || '--'}}</div>
							</div>
						</div>
						<div class="hl-row">
							<div class="hl-row-item">
								<div class="title">{{data.zlfType == 'C'?'纳税人识别号：':'身份证号：'}}</div>
								<div class="item">{{data.idcode | formatUndefined}}</div>
							</div>
							<div class="hl-row-item">
								<div class="title">{{data.zlfType == 'C'?'公司邮箱：':'个人邮箱：'}}</div>
								<div class="item">{{data.email | formatUndefined}}</div>
							</div>
						</div>
						<div class="hl-row">
							<div class="hl-row-item">
								<div class="title">法人：</div>
								<div class="item">{{data.zlfLperson | formatUndefined}}</div>
							</div>
							<div class="hl-row-item">
								<div class="title">联系电话：</div>
								<div class="item">{{data.zlfLphone | formatUndefined}}</div>
							</div>
						</div>
						<div class="hl-row">
							<div class="hl-row-item">
								<div class="title">联系人：</div>
								<div class="item">{{data.zlfSperson | formatUndefined}}</div>
							</div>
							<div class="hl-row-item">
								<div class="title">联系电话：</div>
								<div class="item">{{data.zlfSphone | formatUndefined}}</div>
							</div>
						</div>
						<div class="hl-row">
							<div class="hl-row-item">
								<div class="title">联系地址：</div>
								<div class="item">{{data.zlfAddress | formatUndefined}}</div>
							</div>
						</div>
					</div>

					<!-- 自定义 -->
					<div class="mt-15">
						<hl-custom-fileds type="CONTRACT" mode="detail" :data="tmpData"></hl-custom-fileds>
					</div>

					<!-- 出租资源 -->
					<div class="mt-15 pt-15">
						<h3 class="font-14 color-gray">出租资源</h3>
						<!-- 单元 -->
						<div v-if="building.length">
							<div class="hl-34 mr-10 color-333">单元({{totalArea | formatNum}}m²)</div>
							<div class="unit-table border">
								<div class="tb-title dy-flex border-b gradient-color">
									<div class="dy-fx-2">项目</div>
									<div class="dy-fx-2">楼栋</div>
									<div class="dy-fx-1">楼层</div>
									<div class="dy-fx-4">单元</div>
								</div>
								<div class="tb-content">
									<ul class="dy-flex project-cr">
										<li class="dy-fx-2 project">{{data.projectName}}</li>
										<li class="dy-fx-7">
											<ul class="dy-flex building-cr" v-for="(item,index) in building">
												<li class="dy-fx-2 building">{{item.buildingName}}</li>
												<li class="dy-fx-5">
													<ul class="dy-flex floor-cr" v-for="(item1,index1) in item.floor">
														<li class="dy-fx-1 floor">{{item1.floorName || '--'}}</li>
														<li class="dy-fx-4 unit">
															<b v-for="(item2,index2) in item1.unit" class="clearfix pull-left"
																@click="getUnitDetails(item1.unitId[index2])">
																<a href="javascript:;">{{item2}}</a>
																<i v-if="index2 + 1 !== item1.unit.length">、</i>
															</b>
														</li>
													</ul>
												</li>
											</ul>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<!-- 工位 -->
						<div v-if="wp.length">
							<div class="hl-34 mr-10 color-333" v-if="wp.length">工位({{wpTotalNum}}个)</div>
							<div class="position-table border" v-if="wp.length">
								<div class="tb-title dy-flex border-b gradient-color">
									<div class="dy-fx-3">项目</div>
									<div class="dy-fx-3">楼栋</div>
									<div class="dy-fx-1">楼层</div>
									<div class="dy-fx-1">单元</div>
									<div class="dy-fx-1">工位数</div>
									<div class="position-item">工位</div>
								</div>
								<ul class="tb-content">
									<li class="content-item dy-flex" v-for="(item,index) in wp" :buildingId="item.buildingId"
										:floorId="item.floorId" :unitId="item.unitId">
										<div class="dy-fx-3">{{data.projectName}}</div>
										<div class="dy-fx-3">{{item.buildingName}}</div>
										<div class="dy-fx-1">{{item.floorName || '--'}}</div>
										<div class="dy-fx-1">{{item.unitName}}</div>
										<div class="dy-fx-1">{{item.num}}</div>
										<div class="position-item">
											<span class="position">
												<b v-for="(item1,index1) in item.positions">{{item1.positionName}}<i
														v-if="index1 + 1 !== item.positions.length">、</i></b>
											</span>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<!-- 车位 -->
						<div v-if="st.length">
							<div class="hl-34 mr-10 color-333" v-if="st.length">车位({{stTotalNum}}个)</div>
							<div class="position-table border" v-if="st.length">
								<div class="tb-title dy-flex border-b gradient-color">
									<div class="dy-fx-3">项目</div>
									<div class="dy-fx-3">楼栋</div>
									<div class="dy-fx-1">楼层</div>
									<div class="dy-fx-1">单元</div>
									<div class="dy-fx-1">车位数</div>
									<div class="position-item">车位</div>
								</div>
								<ul class="tb-content">
									<li class="content-item dy-flex" v-for="(item,index) in st" :buildingId="item.buildingId"
										:floorId="item.floorId" :unitId="item.unitId">
										<div class="dy-fx-3">{{data.projectName}}</div>
										<div class="dy-fx-3">{{item.buildingName}}</div>
										<div class="dy-fx-1">{{item.floorName || '--'}}</div>
										<div class="dy-fx-1">{{item.unitName}}</div>
										<div class="dy-fx-1">{{item.num}}</div>
										<div class="position-item">
											<span class="position">
												<b v-for="(item1,index1) in item.positions">{{item1.positionName}}<i
														v-if="index1 + 1 !== item.positions.length">、</i></b>
											</span>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>

					<!-- 租金押金 -->
					<div class="mt-15">
						<h3 class="font-14 color-gray">固定租金</h3>
						<div class="dy-flex line-height-34">
							<div class="dy-fx-1">
								<span class="color-999">租金单价：</span>
								<span>{{ data.rentPrice | formatNum }}元/m²/月</span>
							</div>
							<div class="dy-fx-1">
								<span class="color-999">日租金：</span>
								<span>{{ data.rentPriceDay | formatNum }}元/天</span>
							</div>
							<div class="dy-fx-1">
								<span class="color-999">月租金：</span>
								<span>{{ data.rentPriceMonth | formatNum }}元/月</span>
							</div>
						</div>
						<div class="dy-flex line-height-34">
							<div class="dy-fx-1">
								<span class="color-999">有效租金：</span>
								<span>{{ (data.effectiveRentDay || effectiveRD) | formatNum }}元/m²/天</span>
							</div>
						</div>
						<div class="row" v-if="data.intermediaryCommission != '0'">
							<div class="col-md-2 title">中介佣金：</div>
							<div class="col-md-2 item">
								<span>按月租金{{data.intermediaryCommissionPercent*100}}% &nbsp;{{data.intermediaryCommission}}元</span>
							</div>
						</div>
						<div class="dy-flex line-height-34">
							<div class="dy-fx-1">
								<span class="color-999">押付方式：</span>
								<span>押{{ data.depositPeriod }} 付{{ data.paymentPeriod }}</span>
							</div>
							<div class="dy-fx-1">
								<span class="color-999">租金／押金滞纳金比例：</span>
								<span>{{ data.rentLateFeePercent | formatNum }}%</span>
							</div>
							<div class="dy-fx-1">
							</div>
						</div>
						<!-- 折扣月租金 -->
						<div class="dy-flex line-height-34" v-if="data.rentDiscountRate">
							<div class="dy-fx-1">
								<span class="color-999">折扣率：</span>
								<span>{{data.rentDiscountRate*100 | formatNum}}%</span>
							</div>
							<div class="dy-fx-1">
								<span class="color-999">折后日租金：</span>
								<span>{{data.rentDiscountPriceDay | formatNum}}元/天</span>
							</div>
							<div class="dy-fx-1">
								<span class="color-999">折后月租金：</span>
								<span>{{data.rentDiscountPriceMonth | formatNum}}元/月</span>
							</div>
						</div>

					</div>
					<!-- 租金押金 -->
					<div class="pb-10" v-if="dototal > 0">
						<h3 class="title">押金</h3>
						<div class="row">
							<div class="col-md-2 title" style="width: 100px">押金总金额：</div>
							<div class="col-md-2 item" style="margin-right:30px">{{yaTotal}}元</div>
						</div>
						<div class="table border mt-10">
							<div class="tb-title dy-flex border-b gradient-color">
								<div class="dy-fx-1">费用名</div>
								<div class="dy-fx-1">单价</div>
								<div class="dy-fx-1">押几{{data.rentWay == 'D'?'天':'月'}}</div>
								<div class="dy-fx-1">总金额</div>
								<div class="dy-fx-1">滞纳金比例</div>
							</div>
							<ul class="tb-content border-b">
								<li class="content-item dy-flex" v-for="(item,index) in data.expenses"
									v-if="item.expenseType == 'D' && (item.depositType == 'DR' || !item.depositType)">
									<div class="dy-fx-1">租金押金</div>
									<div class="dy-fx-1">--</div>
									<div class="dy-fx-1">{{item.expensePeriod || '--'}}</div>
									<div class="dy-fx-1">{{item.amount | formatNum}}</div>
									<div class="dy-fx-1">{{Number(item.lateFee * 100).toFixed(2)}}%</div>
								</li>
							</ul>
							<ul class="tb-content">
								<li class="content-item dy-flex" v-for="(item,index) in data.expenses"
									v-if="item.expenseType == 'D' && item.depositType == 'DO'">
									<div class="dy-fx-1">{{item.expenseName}}</div>
									<div class="dy-fx-1">{{item.price | formatNum}}（元/平米/月）</div>
									<div class="dy-fx-1">{{item.expensePeriod || '--'}}</div>
									<div class="dy-fx-1">{{item.amount | formatNum}}</div>
									<div class="dy-fx-1">{{Number(item.lateFee * 100).toFixed(2)}}%</div>
								</li>
							</ul>
						</div>
					</div>
					<div v-if="rent.length">
						<h3 class="title">阶梯租金</h3>
						<p style="margin-bottom: 5px;"><span class="color-999">递增方式：</span>
							<span>{{contract.rentIncreaseWayValue ? contract.rentIncreaseWayValue : '下账期递增'}}</span></p>
						<div class="table border">
							<div class="tb-title dy-flex border-b gradient-color">
								<div class="dy-fx-2">阶梯开始时间</div>
								<div class="dy-fx-1">递增率</div>
								<div class="dy-fx-2">租金单价({{contract.rentPriceUnit == 'D'? '元/平米/天':'元/平米/月'}})</div>
								<div class="dy-fx-2">日租金(元/天)</div>
								<div class="dy-fx-2">月租金(元/月)</div>
								<div class="dy-fx-1" v-if="contract.rentDiscountRate">折扣率</div>
								<div class="dy-fx-2" v-if="contract.rentDiscountRate">折后日租金(元/天)</div>
								<div class="dy-fx-2" v-if="contract.rentDiscountRate">折后月租金(元/月)</div>
							</div>
							<ul class="tb-content">
								<li class="content-item dy-flex" v-for="(item,index) in rent">
									<div class="dy-fx-2">{{item.beginDate}}</div>
									<div class="dy-fx-1">{{Number(item.percent).toFixed(2)}}%</div>
									<div class="dy-fx-2">{{item.price | formatNum}}</div>
									<div class="dy-fx-2">{{item.dayPrice | formatNum}}</div>
									<div class="dy-fx-2">{{item.monthPrice | formatNum}}</div>
									<div class="dy-fx-1" v-if="contract.rentDiscountRate">{{(item.discount*100) | formatNum}}%</div>
									<div class="dy-fx-2" v-if="contract.rentDiscountRate">{{item.discountD | formatNum}}</div>
									<div class="dy-fx-2" v-if="contract.rentDiscountRate">{{item.discountM | formatNum}}</div>
								</li>
							</ul>
						</div>
					</div>
					<!-- 免租期 -->
					<div v-if="freeDate.length">
						<h3 class="title">免租期/装修期</h3>
						<div class="table border">
							<div class="tb-title dy-flex border-b gradient-color">
								<div class="dy-fx-2">序号</div>
								<div class="dy-fx-4">免租/装修开始时间</div>
								<div class="dy-fx-4">免租/装修结束时间</div>
								<div class="dy-fx-2">账单去除</div>
								<div class="dy-fx-2">备注</div>
							</div>
							<ul class="tb-content">
								<li class="content-item dy-flex" v-for="(item,index) in freeDate">
									<div class="dy-fx-2">{{index+1}}</div>
									<div class="dy-fx-4">{{item.freeBeginDate | formatDate}}</div>
									<div class="dy-fx-4">{{item.freeEndDate | formatDate}}</div>
									<div class="dy-fx-2">
										<span v-show="index == 0">{{item.billHiddenFlag == 'Y' ? '是':'否' }}</span>
										<span v-show="index > 0">{{ '--' }}</span>
									</div>
									<div class="dy-fx-2">{{item.freeMemo || '--' }}</div>
								</li>
							</ul>
						</div>
					</div>
					<!-- 营业额抽成 -->
					<div v-if="data.commissionRules.length">
						<h3 class="font-14 color-gray">营业额抽成</h3>
						<p class="line-height-34">抽成方式: <span class="ml-10">{{ data.commissionTypeVal }}</span> <span
								style="font-weight: normal;color: #E98667;font-size: 12px"
								v-if="data.compareRentAmtFlag == 'Y'">(租金与抽成取其高)</span></p>
						<div class="table border">
							<div class="tb-title dy-flex gradient-color">
								<div class="dy-flex border-b dy-fx-8">
									<div class="dy-fx-1" style="font-weight: normal;">基数下限（＞元）</div>
									<div class="dy-fx-1" style="font-weight: normal;">基数上限（≤元）</div>
									<div class="dy-fx-1" style="font-weight: normal;">抽成比例（%）</div>
									<div class="dy-fx-1" style="font-weight: normal;">抽成下限（元）</div>
									<div class="dy-fx-1" style="font-weight: normal;">抽成上限（元）</div>
									<div class="dy-fx-1" style="font-weight: normal;">滞纳金比例（%）</div>
									<div style="width:150px">付款日期</div>
								</div>
								<div class="dy-fx-1 text-center" style="font-weight: normal;">付款周期（月）</div>
							</div>
							<div class="dy-flex">
								<ul class="tb-content dy-fx-8">
									<li class="content-item dy-flex" v-for="(item,index) in data.commissionRules">
										<div class="dy-fx-1">{{ item.baseValDownLimit }}</div>
										<div class="dy-fx-1">
											<span v-if="index < data.commissionRules.length-1">{{ item.baseValUpLimit }}</span>
											<span v-if="index == data.commissionRules.length-1">不限</span>
										</div>
										<div class="dy-fx-1">{{ item.commissonPercent}}</div>
										<div class="dy-fx-1">{{ item.commissionDownLimit || '--' }}</div>
										<div class="dy-fx-1">{{ item.commissionUpLimit || '--' }}</div>
										<div class="dy-fx-1">{{ item.lateFeePercent || '--' }}</div>
										<div style="width:150px">
											{{data.commissionDateBoa ? (data.commissionDateBoa == 'B' ? '账单开始前' : '账单开始后') : '账单开始前'}}{{data.commissionDateFixNum | formatUndefined}}{{data.commissionDateFixType ? (data.commissionDateFixType == 'TS' ? '个自然日' : '号') : '个自然日'}}
										</div>
									</li>
								</ul>
								<div class="dy-fx-1 text-center border-l"
									:style="{height: data.commissionRules.length*40 + 'px', lineHeight: data.commissionRules.length*40 + 'px'}">
									{{ data.commissionPaymentPeriod }}</div>
							</div>
						</div>
					</div>

					<!-- 周期性费项 -->
					<div v-if="pExpense.length">
						<h3 class="title">周期性费项</h3>
						<div class="table border">
							<div class="tb-title dy-flex border-b gradient-color">
								<div class="dy-fx-2">费用名</div>
								<div class="dy-fx-2">单价</div>
								<div class="dy-fx-1">日金额(元/天)</div>
								<div class="dy-fx-1">月金额(元/月)</div>
								<div class="dy-fx-1">付款周期</div>
								<div class="dy-fx-1">滞纳金比例</div>
								<div class="dy-fx-2">计费时间</div>
							</div>
							<ul class="tb-content">
								<li class="content-item dy-flex" v-for="(item,index) in pExpense">
									<div class="dy-fx-2">{{item.expenseName}}</div>
									<div class="dy-fx-2 dy-flex" style="justify-content: space-between;"><span
											class="pl-5">{{item.price | formatNum}}</span> <span class="pr-5">{{ item.unitsVal }}</span></div>
									<div class="dy-fx-1">{{item.priceDay | formatNum}}</div>
									<div class="dy-fx-1">{{item.priceMonth | formatNum}}</div>
									<div class="dy-fx-1">{{item.expensePeriod}}</div>
									<div class="dy-fx-1">{{Number(item.lateFee * 100).toFixed(2)}}%</div>
									<div class="dy-fx-2">
										<div v-if="item.customPeriod.length">
											<p v-for="item1 in item.customPeriod">{{item1.beginDate | formatDate}} 至
												{{item1.endDate | formatDate}}</p>
										</div>
										<div v-else>同租赁周期</div>
									</div>
								</li>
							</ul>
						</div>
					</div>

					<!-- 一次性费项 -->
					<div v-if="oExpense.length">
						<h3 class="title">一次性费项</h3>
						<div class="table border">
							<div class="tb-title dy-flex border-b gradient-color">
								<div class="dy-fx-1">费用名</div>
								<div class="dy-fx-1">单价(元/平米/天)</div>
								<div class="dy-fx-1">总金额</div>
								<div class="dy-fx-1">滞纳金比例</div>
							</div>
							<ul class="tb-content">
								<li class="content-item dy-flex" v-for="(item,index) in oExpense">
									<div class="dy-fx-1">{{item.expenseName}}</div>
									<div class="dy-fx-1">{{item.price | formatNum}}</div>
									<div class="dy-fx-1">{{item.amount | formatNum}}</div>
									<div class="dy-fx-1">{{Number(item.lateFee * 100).toFixed(2)}}%</div>
								</li>
							</ul>
						</div>
					</div>

					<!-- 临时性费项 -->
					<div v-if="tExpense.length">
						<h3 class="title">临时费项</h3>
						<div class="table border">
							<div class="tb-title dy-flex border-b gradient-color">
								<div class="dy-fx-1">费用名</div>
								<div class="dy-fx-3">金额</div>
								<div class="dy-fx-3">税率(%)</div>
							</div>
							<ul class="tb-content">
								<li class="content-item dy-flex" v-for="(item,index) in tExpense">
									<div class="dy-fx-1">{{item.expenseName}}</div>
									<div class="dy-fx-3">{{item.amount | formatNum}}</div>
									<div class="dy-fx-3">{{item.taxPercent*100 || '--'}}</div>
								</li>
							</ul>
						</div>
					</div>

					<!--变更后付款计划-->
					<div class="mt-15">
						<hl-pay-plan :data="payData" ref="payData" :alert-flag="true" :is-edit="false" style="margin-top: 20px;">
							<hl-button @on-click="exportBill">导出</hl-button>
						</hl-pay-plan>
					</div>

					<div class="pt-10">
						<!--合同为草稿或者审核拒绝状态时能够编辑、作废、提交合同-->
						<hl-button type="primary" @on-click="editContract" v-show="permissions.indexOf('c121') > -1"
							v-if=" data.alterInfoVO.status == 'CG' || data.alterInfoVO.status == 'FBP' || data.alterInfoVO.status == 'FCP' ">
							编辑</hl-button>
						<hl-button type="outline" @on-click="submitContract"
							v-show="data.alterInfoVO.status == 'CG' || data.alterInfoVO.status == 'FBP' || data.alterInfoVO.status == 'FCP'"
							v-if=" permissions.indexOf('c123') > -1 ">提交</hl-button>
						<hl-button type="outline" @on-click="invalidContract"
							v-show="data.alterInfoVO.status == 'CG' || data.alterInfoVO.status == 'FBP' || data.alterInfoVO.status == 'FCP'"
							v-if=" permissions.indexOf('c124') > -1 ">作废</hl-button>
					</div>
				</section>

				<section v-if="selectedTabItem == '账单变更信息'">

					<div class="mt-15 pt-10 text-center" v-if="!billChangeData.conflictBills.length">暂无变更信息</div>
					<div v-if="billChangeData.conflictBills.length">
						<div class="mt-15 pt-10 color-orange">
							此次变更生效日（{{ data.alterInfoVO.effectiveDate | formatDate }}）影响了以下账单，处理完成后全部作废</div>
							<div class="unit-table tablebo">
							<div class="tb-title dy-flex border-b gradient-color tableheader">
								<div class="dy-fx-1">账单编号</div>
								<div class="dy-fx-3">变更前</div>
								<div class="dy-fx-3">变更后</div>
							</div>
							<div class="tb-content-plus" >
								<ul class="dy-flex border-b" v-for="item in billChangeData.conflictBills">
									<li class="dy-fx-1 border-r" style="align-items: center;justify-content: center;" v-if="item.expenses.length>0">
										{{item.billNo}}
									</li>
									<li class="dy-fx-3 border-r rentClass" v-if="item.expenses.length>0">
										<section v-for="(single,one) in item.expenses" v-if="single.amount">
											<div v-if="!one">
												<div>
													<p class="table-gray-title">账单周期</p>
												</div>
												<span>{{item.beginDate | formatDate}}至{{item.endDate | formatDate}}</span>
											</div>
											<div class="dy-flex" style="flex-direction: column;">
												<div>
													<p class="table-gray-title mt-10">{{single.expenseName}}</p>
												</div>
												<span>应收金额：{{single.amount.amountReceive || '--'}}元</span>
												<span>已收金额：{{single.amount.amountPayed || '--'}}元</span>
												<span>减免金额：{{single.amount.derateExpense || '--'}}元</span>
												<span>结转金额：{{single.amount.carryOverAmount || '--'}}元</span>
											</div>
										</section>
										<section v-if="!item.expenses[0].amount" class="invalidCalss">作废</section>
									</li>
									<li class="dy-fx-3 rentClass" v-if="item.expenses.length>0">
										<section v-for="(single,one) in item.expenses" v-if="single.withdrawAmount">
											<div v-if="!one">
												<div>
													<p class="table-gray-title">账单周期</p>
												</div>
												<span
													class="color-orange">{{item.withdrawBeginDate | formatDate}}至{{item.withdrawEndDate | formatDate}}</span>
											</div>
											<div v-if="single.withdrawAmount" class="dy-flex" style="flex-direction: column;">
												<div>
													<p class="table-gray-title mt-10">{{single.expenseName}}</p>
												</div>
												<span>应收金额：{{single.withdrawAmount.amountReceive || '--'}}元</span>
												<span>已收金额：{{single.withdrawAmount.amountPayed || '--'}}元<span
														style="color:#ec4151"
														v-if="moneyCha > 0">（应退：{{moneyCha}}元）</span></span>
												<span>减免金额：{{single.withdrawAmount.derateExpense || '--'}}元</span>
												<span>结转金额：{{single.withdrawAmount.carryOverAmount || '--'}}元</span>
											</div>
										</section>
										<section v-if="!item.expenses[0].withdrawAmount" class="invalidCalss">作废</section>
									</li>
								</ul>
							</div>
						</div>
						<div class="mt-15 pt-15">
							<!-- <dl v-if="billChangeData.confilctSettleUpBill.billExpense.length">
								<dt class="color-gray">应收部分</dt>
								<dd class="line-height-34" v-for="item in billChangeData.confilctSettleUpBill.billExpense"
									v-if="item.amountReceive >= 0">
									<span class="color-999">{{item.expenseName}}：</span>
									<span class="color-666">{{ item.amountReceive | formatNum }}元</span>
									<span v-if="item.memo">(备注：{{ item.memo }})</span>
								</dd>
							</dl>

							<dl class="mt-15" v-if="billChangeData.confilctSettleUpBill.billExpense.length">
								<dt class="color-gray">应退部分</dt>
								<dd class="line-height-34" v-for="item in billChangeData.confilctSettleUpBill.billExpense"
									v-if="0 > item.amountReceive">
									<span class="color-999">{{item.expenseName}}：</span>
									<span class="color-666">{{ item.amountReceive | formatNum }}元</span>
									<span v-if="item.memo">(备注：{{ item.memo }})</span>
								</dd>
							</dl> -->

							<dl class="mt-15">
								<dt class="color-gray">费用合计</dt>
								<dd class="line-height-34">
									<span class="color-999">总计金额：</span>
									<span class="color-666">{{ moneyCha >= 0 ?  moneyCha : -moneyCha}}元
										（{{ 0 > moneyCha  ? '应付' : '应退' }}）</span>
								</dd>
							</dl>
						</div>
					</div>

				</section>
			</div>
		</div>
	</div>

	<hl-dialog title="版本比对" :visible="versionDisplay" :height="560" :width="900" @on-close="versionevent">
		<div class="border br-4">
			<div class="dy-flex bg-fff text-center line-height-40 color-gray">
				<div class="dy-fx-1 border-r">变更项</div>
				<div class="dy-fx-3 border-r">变更前</div>
				<div class="dy-fx-3">变更后</div>
			</div>
			<div class="dy-flex bg-fff border-t" style="min-height: 45px;" v-for="item in groupLogs"
				v-if="publicGroup.indexOf(item.group) > -1">
				<div class="dy-fx-1 border-r dy-flex color-666" style="justify-content: center;align-items: center;">
					{{ item.operationName }}</div>
				<!-- start -->
				<div class="dy-fx-6">

					<div class="dy-flex" v-for="log in item.logRecords">
						<div class="dy-fx-1 border-r">
							<div v-for="row in log.rowData">
								<div class="table-gray-title" v-if="row.logType == 'textline' && publicFlag.indexOf(row.isUpdate) > -1">
									{{ row.content }}</div>
								<div v-if="row.logType == 'add'" class="pl-12 pr-12 ptb-10">--</div>
								<div class="pl-12 pr-12 ptb-10 color-999" style="line-height: 28px;"
									v-if="publicLogsTypes.indexOf(row.logType) > -1">{{ row.key ? row.key + ':' : '' }}
									{{ row.before ? row.before : row.content || '--' }}</div>
							</div>
						</div>
						<div class="dy-fx-1">
							<div v-for="row in log.rowData">
								<div class="table-gray-title" v-if="row.logType == 'textline' && publicFlag.indexOf(row.isUpdate) > -1">
									{{ row.content }}</div>
								<div v-if="row.logType == 'add'" class="pl-12 pr-12 ptb-10 color-orange">
									{{ row.key ? row.key + ':' : '' }} {{ row.after ? row.after : row.content }}</div>
								<div :class="{'color-orange': row.logType == 'change', 'color-delete': row.logType == 'delete'}"
									class="pl-12 pr-12 ptb-10 color-999" style="line-height: 28px;"
									v-if="publicLogsTypes.indexOf(row.logType) > -1">{{ row.key ? row.key + ':' : '' }}
									{{ row.after ? row.after : row.content || '--' }}</div>
							</div>
						</div>
					</div>

				</div>
				<!-- end -->
			</div>
		</div>
		<div class="flow--footer" slot="footer">
			<a @click="cutChangeFlow">{{!cutChangeFlowFlag ? '只显示变更信息' : '显示全部' }}</a>
		</div>
	</hl-dialog>

	<!-- 单元详情 -->
	<unit-details :unit-id="unitId" :unit-details-flag="unitDetailsFlag" @close="closeUnitPop"></unit-details>
</section>

<script src="modules/rent/scripts/unit_details.js" charset="utf-8"></script>
<script src="modules/contract/scripts/contract_update_details.js" charset="utf-8"></script>
<script src="modules/contract/scripts/contract_public.js" charset="utf-8"></script>
